<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>

		<title>个人详情</title>
		<!-- Bootstrap core CSS -->
		<link href="../static/asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
		<link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			/* Chart.js */

			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}

			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}

			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>
<div th:replace="sidbar::#topbar"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="sidbar::#sbar(activeUri='main.html')"></div>

				<main role="main"  class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<div class="chartjs-size-monitor"  style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
						<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
						</div>
						<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
						</div>
					</div>


<!--                    模态框-->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="exampleModalLabel">修改个人资料</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group" id="form1">

                                    </div>
                                    <div class="form-group">
                                        <input type="text" id="userId" hidden="hidden">
                                        <label   class="control-label">姓名:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="nickNameUP" value="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mobileUP" class="control-label">手机:</label>
                                        <textarea class="form-control" id="mobileUP"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label   class="control-label">身份证:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="codeUP" value="">
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <label class="control-label">性别：</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" id="sex1" type="radio" name="sex" value="1">
                                            <label class="form-check-label">男</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" id="sex2"   type="radio" name="sex" value="2">
                                            <label class="form-check-label">女</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label   class="control-label">地址:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="addressUP" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateUser()">修改</button>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" >修改密码</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <button type="button" class="btn btn-default" id="showPwd">显示密码</button>
                                        <hr>
                                        <div class="input-group" id="input">
                                            <label   class="control-label">输入旧密码:</label>
                                            <input type="password" class="form-control" id="pwdOld" placeholder="输入旧密码"></input>
                                            <hr>
                                            <label   class="control-label">输入新密码:</label>
                                            <input  type="password" class="form-control" id="pwdNew" placeholder="输入新密码"></input>
                                            <hr>
                                            <label   class="control-label">再次输入密码:</label>
                                            <input type="password" class="form-control" id="pwdNew2" placeholder="再次输入密码"></input>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updatePwd()">修改</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div   class="panel panel-success" style="text-align: center;margin: auto;width: 600px;font-size:medium">
                        <div class="panel-heading">
                            <h class="panel-body" >个人信息 </h>
                        </div>
                        <p id="money" class="panel-title">  </p>
                        <div class="panel-heading">
                            <p id="name" class="panel-title"> </p>
                        </div>
                        <div class="panel-body">
                            <p id="userName" class="panel-title">  </p>
                        </div>
                        <div class="panel-heading">
                            <h3 class="panel-title" id="age">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-body"  >
                            <h3 class="panel-title" id="birthday">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-heading">
                            <h3 class="panel-title" id="sex">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-body"   >
                            <h3 class="panel-title" id="loginTime">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-heading">
                            <h3 class="panel-title" id="code">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-body">
                            <h3 class="panel-title" id="address">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-heading">
                            <h3 class="panel-title" id="mobile">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-body">
                            <h3 class="panel-title" id="group">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-heading">
                            <h3 class="panel-title" id="work">   &nbsp;&nbsp; </h3>
                        </div>
                        <div class="panel-body" id="buttons">
                            <a class="btn-info" th:href="@{/toMain}">返回首页</a>
                        </div>
                    </div>
				</main>
			</div>
		</div>


<script>
    var userId = location.href.split('?userId=')[1];
    if (userId==0){
        $('#buttons').append('  <button type="button" class="btn-success" data-toggle="modal" data-target="#myModal2" >' +
            '修改密码</button>').append('<button type="button" class="btn-success"' +
            ' data-toggle="modal" data-target="#myModal" >修改信息</button>')
    }
    getMsg();
    $.ajax({
        type:"get",
        url:"money/getMyMoney",
        success:function (data) {
            $("#money").html("余额: "+data.data.totalMoney+" 元");
        },
        error:function(data){
            alert('服务器内部错误！');
        },
    });

    $(function(){
        $("#showPwd").mousedown(function(){
            $("#input input").attr("type", "text");
        });
        $("#showPwd").mouseup(function(){
            $("#input input").attr("type", "password");
        });
    });

    function getMsg(){
        $.ajax({
            type:"get",
            url:"user/getMyMsg",
            data:{"userId":userId},
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                    $("#name").html("名字: " + data.data.userDTO.nickName);
                    $("#address").html("地址: " + data.data.userDTO.address);
                    $("#userName").html("帐号: " + data.data.userDTO.userName);
                    $("#age").html("年龄: " + data.data.age);
                    $("#code").html("身份证: " + data.data.userDTO.code);
                    $("#mobile").html("手机号: " + data.data.userDTO.mobile);
                    $("#birthday").html("生日: " + data.data.birthday);
                    $("#loginTime").html(" 登录时间: " + data.data.userDTO.loginTime);
                    $("#sex").html(" 性别: " + data.data.userDTO.sexCN);
                    $("#group").html(" 部门: " + data.data.groupBean.name);
                    $("#work").html(" 职位: " + data.data.userDTO.work);
                    // 模态框  addressUP
                    $("#addressUP").val( data.data.userDTO.address);
                    $("#mobileUP").val( data.data.userDTO.mobile);
                    $("#codeUP").val( data.data.userDTO.code);
                    $("#nickNameUP").val( data.data.userDTO.nickName);
                    $("#userId").val( data.data.userDTO.userId);

                    if (data.data.userDTO.sex==1){
                        $("#sex1").prop("checked",true);
                        $("#sex2").prop("checked",false);
                    }
                    if (data.data.userDTO.sex==2){
                        $("#sex2").prop("checked",true);
                        $("#sex1").prop("checked",false);
                    }
                }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }

    function updateUser() {
        var dataEL={'code':$("#codeUP").val(),'mobile':$("#mobileUP").val(), 'sex':$('input[name="sex"]:checked').val(),
            'address':$('#addressUP').val(),'nickName':$('#nickNameUP').val(),'userId':$('#userId').val()};
        $.ajax({
            type:"post",
            url:"user/updateUser",
            data: dataEL,
            success:function (data) {
                getMsg();
                    alert(data.status_desc);
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }

    function updatePwd() {
        var dataEL={'pwd':$("#pwdOld").val(),'newPwd':$("#pwdNew").val(),'userId':$("#pwdNew").val()};
        if ($("#pwdNew").val()!=$("#pwdNew2").val()){
            alert("两次密码不一致");
        } else {
            $.ajax({
                type:"post",
                url:"user/updatePassWord",
                data: dataEL,
                success:function (data) {
                    if (data.code == 201) {
                        alert(data.status_desc)
                    } else {
                        alert("请重新登录");
                        $.ajax({
                            url:"/logout"
                        });
                    }

                },
                error:function(data){
                    alert('服务器内部错误！');
                },
            });
        }
    }
</script>
	</body>

</html>
